<template>
	<view class="container">
		<view class="wd-table__container">
			<view class="wd-table__header">
				<wd-table :borderLeft="false">
					<wd-tr>
						<wd-td :shrink="false" alignItems="center" width="90rpx" height="100rpx" backgroundColor="#fff" :top="true" :size="24" @click="weekShow = true">
							<u-icon name="calendar" color="#6D4BBE" size="46"></u-icon>
						</wd-td>
					</wd-tr>
					<wd-tr v-for="(item, index) in time" :key="index">
						<wd-td :shrink="false" alignItems="center" width="90rpx" height="200rpx" backgroundColor="#fff" :top="true" :size="24">
							<view class="time">{{ item.start_time }}</view>
						</wd-td>
					</wd-tr>
				</wd-table>
			</view>
			<scroll-view scroll-x class="wd-table__scroll">
				<wd-table :borderLeft="false" :style="{'display':'block','width':(190*date.length)+'rpx'}">
					<wd-tr>
						<wd-td :shrink="false" alignItems="center" width="190rpx" height="100rpx" backgroundColor="#fff" v-for="(item, index) in date" :key="index">
							<view :class="{'pastdays': !item.status}">
								<view class="date">{{ item.date }}</view>
								<view class="week">{{ item.week_name }}</view>
							</view>
						</wd-td>
					</wd-tr>
					<wd-tr v-for="(item, index) in time" :key="index">
						<wd-td :shrink="false" alignItems="center" width="190rpx" height="200rpx" padding="0" backgroundColor="#fff" v-for="(obj, idx) in date" :key="idx">
							<view class="panel" v-for="(sitm,sidx) in schedule" :key="sidx" v-if="sitm.start_time==item.start_time && sitm.date_text==obj.date" :style="{'background':sitm.course.course_color.style}" @click="panelClick(sitm)">
								<text>{{ sitm.course.name }}</text>
								<text>{{ sitm.start_time}}-{{sitm.end_time}}</text>
								<text>{{ sitm.teacher.name }}</text>
								<text>{{ sitm.classroom.name }}</text>
								<u-rate :current="sitm.course.degree" :disabled="true" inactive-color="#fff" active-color="#fff" size="18" gutter="4"></u-rate>
							</view>
						</wd-td>
					</wd-tr>
				</wd-table>
			</scroll-view>
		</view>
		
		<u-popup v-model="weekShow" mode="top" z-index="970" border-radius="24">
			<view class="wd-flex week-switch">
				<image @click="prev_week" class="arrow" src="../../../static/icons/icon_arrow_left.png" mode="aspectFit"></image>
				<view class="wd-flex-cell">
					本周<text>{{week_date}}</text>
				</view>
				<image @click="next_week" class="arrow" src="../../../static/icons/icon_arrow_right.png" mode="aspectFit"></image>
			</view>
		</u-popup>
		
		<view class="wd-toolbar">
			<view class="wd-toolbar-cell" @click="bindTogglePoster">
				<u-icon name="share" color="#fff" size="34" label="分享" label-color="#fff" margin-left="20"></u-icon>
			</view>
			<view class="wd-toolbar-cell" @click="toolShow = true">
				<u-icon name="calendar" color="#fff" size="34" label="排课" label-color="#fff" margin-left="20"></u-icon>
			</view>
		</view>
		<u-popup v-model="toolShow" mode="bottom" z-index="97" border-radius="24">
			<view class="tool">
				<view class="tool-cell" @click="arrangement">新增排课</view>
				<view class="tool-cell"  @click="copyShow = true">复制课表</view>
				<!-- <view class="tool-cell">标题与备注</view> -->
			</view>
		</u-popup>
		
		<u-popup v-model="copyShow" mode="bottom" z-index="97" border-radius="24">
			<view class="tool">
				<view class="tool-cell" @click="copyArrangement" data-week="next_week">复制课表到下周</view>
				<view class="tool-cell" @click="copyArrangement" data-week="next_two_week">复制课表到下下周</view>
				<!-- <view class="tool-cell" @click="copy_step_course" data-week="next_month">复制课表到下月</view> -->
			</view>
		</u-popup>
		
		<wd-poster v-model="posterShow" :data="posterData" @close="bindTogglePoster"></wd-poster>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				week_date:'',
				no:0,
				time: [
					// { start_time: '09:00' },
					// { start_time: '10:00' },
					// { start_time: '18:00' },
					// { start_time: '19:00' },
				],
				date: [
					// { date: '06.21', week_name: '周一', status: 0 },
					// { date: '06.22', week_name: '周二', status: 1 },
					// { date: '06.23', week_name: '周三', status: 1 },
					// { date: '06.24', week_name: '周四', status: 1 },
					// { date: '06.25', week_name: '周五', status: 1 },
					// { date: '06.26', week_name: '周六', status: 1 },
					// { date: '06.27', week_name: '周日', status: 1 },
				],
				schedule: [
					// {
					// 	id: 1,
					// 	date_text: '06.21',
					// 	start_time: '19:00',
					// 	end_time: '19:30',
					// 	course:{name: '瑜伽·纤体塑性',degree: 4,coursecolor:{style:'#5D6FC1'}},
					// 	teacher:{name: '瑶瑶'},
					// 	classroom:{name: '美林泉'},
					// }
				],
				weekShow: false,
				toolShow: false,
				copyShow: false,
				posterShow: false,
				posterData: {
					time:[],
					date:[],
					schedule:[]
				}
			}
		},
		onLoad(){
			
		},
		onShow(){
			this.get_week_time();
		},
		methods: {
			panelClick(item) {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: item.id+'-'+item.title,
				// })
				uni.navigateTo({
					url:'/pages/manage/addSchedule/addSchedule?arrangement_id='+item.id
				})
			},
			//上周
			prev_week(){
				var no = this.no;
				no--;
				this.no = no;
				this.get_week_time();
			},
			//下周
			next_week(){
				var no = this.no;
				no++;
				this.no = no;
				this.get_week_time();
			},
			//获取日期和时间
			get_week_time(){
				var that = this;
				let shop = this.$core.getCurrentShop();
				var shop_id = shop.id;
				var no = that.no;
				that.$core.post({url:'fitness.manage/arrangement',data:{shop_id:shop_id,no:no},success:(ret)=>{
					that.date = ret.data.date,
					that.time = ret.data.time_list,
					that.schedule = ret.data.course_list;
					that.week_date = ret.data.week_date;
				}});
			},
			arrangement(){
				uni.navigateTo({
					url:"/pages/manage/addSchedule/addSchedule"
				})
			},
			//复制课程
			copyArrangement(e){
				var that = this;
				var type = e.currentTarget.dataset.week;
				let shop = this.$core.getCurrentShop();
				var shop_id = shop.id;
				if(shop_id == '') return false;
				
				that.$core.post({url:'fitness.manage/copy_arrangement',data:{shop_id:shop_id,type:type},success:(ret)=>{
					uni.showToast({
						title:ret.msg,
						icon:"none"
					})
				}});
			},
			bindTogglePoster() {
				if (!this.posterShow) {
					this.posterShow = true
					//把日期、时间和课表集合到一个对象中，传给海报组件去绘制
					//海报的标题、logo图片、二维码图片、扫码提示文字，目前都放在了海报组件中静态写死的，开发可根据实际情况调整
					console.log(this.date)
					this.posterData = {
						time: this.time,
						date: [
							{ date: this.date[1].date, week_name: this.date[1].week_name, status: 1 },
							{ date: this.date[2].date, week_name: this.date[2].week_name, status: 1 },
							{ date: this.date[3].date, week_name: this.date[3].week_name, status: 1 },
							{ date: this.date[4].date, week_name: this.date[4].week_name, status: 1 },
							{ date: this.date[5].date, week_name: this.date[5].week_name, status: 1 },
							{ date: this.date[6].date, week_name: this.date[6].week_name, status: 1 },
							{ date: this.date[7].date, week_name: this.date[7].week_name, status: 1 },
						],
						schedule: this.schedule,
					}
				} else {
					this.posterShow = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wd-table__container {
		position: relative;
		width: 100%;
		padding-bottom: 100rpx;
		overflow-x: hidden;
		.time {
			line-height: 34rpx;
			font-size: 24rpx;
			color: #191919;
		}
		.date {
			line-height: 38rpx;
			font-size: 22rpx;
			color: #6D4BBE;
		}
		.week {
			line-height: 30rpx;
			font-size: 26rpx;
			color: #6D4BBE;
		}
		.pastdays {
			.date,
			.week {
				color: #999999;
			}
		}
		.panel {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			padding: 16rpx;
			background: #999999;
			border-radius: 24rpx;
			overflow: hidden;
			text {
				display: block;
				text-align: center;
				line-height: 32rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
	.wd-table__header {
		position: relative;
		z-index: 3;
		width: 90rpx;
		background: #FFFFFF;
		box-shadow: 3rpx 0 10rpx 0 rgba(0, 0, 0, 0.06);
		
	}
	.wd-table__scroll {
		width: 100%;
		padding-left: 90rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		box-sizing: border-box;
	}
	.week-switch {
		padding: 36rpx 25rpx;
		.arrow {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}
		.wd-flex-cell {
			padding: 0 30rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #666666;
			text {
				display: block;
				margin-top: 8rpx;
				line-height: 42rpx;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
	.wd-toolbar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		display: flex;
		align-items: center;
		background: rgba(109, 75, 190, 0.9);
		border-radius: 24rpx 24rpx 0 0;
		&-cell {
			position: relative;
			flex: 1;
			text-align: center;
			line-height: 95rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			overflow: hidden;
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: -20rpx;
				display: block;
				width: 2rpx;
				height: 40rpx;
				background: rgba(255,255,255,.6);
				border-radius: 9px;
			}
			&:last-child:after {
				display: none;
			}
		}
	}
	.tool {
		padding-bottom: 95rpx;
		&-cell {
			border-bottom: 1rpx #EDEDED solid;
			padding: 35rpx;
			text-align: center;
			line-height: 45rpx;
			font-size: 32rpx;
			color: #333333;
		}
	}
</style>